<template>
  <div class="icon-manager full">
    <iframe class="full" :src="curUrl" v-if="showModal" />
    <div class="switch-btns">
      <ButtonGroup vertical>
        <Button
          v-for="(item, i) in icons"
          :key="'iconBtn' + i"
          :type="curUrl === item.url ? 'primary' : 'default'"
          @click="handleClick(item)"
          >{{ item.title }}</Button
        >
        <Button @click="handleShowUpload">更新图标</Button>
      </ButtonGroup>
    </div>
    <input
      type="file"
      style="display: none"
      ref="fileUpload"
      :multiple="false"
      accept=".zip"
      @change="handleUpload"
    />
  </div>
</template>

<script>
import { commonApi } from "@/api";
export default {
  name: "IconManager",
  props: {
    showModal: {
      type: Boolean,
    },
  },
  data() {
    return {
      curUrl: "http://www.fontawesome.com.cn/faicons/",
      icons: [
        {
          title: "AwsomeIcon",
          url: "http://www.fontawesome.com.cn/faicons/",
        },
        {
          title: "iview自带",
          url: "https://www.iviewui.com/components/icon",
        },
        {
          title: "个人补充",
          url: `${location.origin}/uploads/icons/demo.html`,
        },
        {
          title: "iconfont图标库",
          type: "open",
          url: "https://www.iconfont.cn/",
        },
        {
          title: "图标制作",
          type: "open",
          url: "https://icomoon.io/app/#/select",
        },
      ],
    };
  },
  methods: {
    handleClick(item) {
      if (item.type === "open") {
        window.open(item.url);
      } else {
        this.curUrl = item.url;
      }
    },
    handleShowUpload() {
      this.$refs.fileUpload.click();
    },
    handleUpload(evt) {
      console.log(evt);
      let formData = new FormData();
      formData.append("files", evt.target.files[0]);
      commonApi({
        method: "POST",
        url: "/upload/updateIcon",
        data: formData,
        title: "更新图标库",
        response: [],
      }).then((res) => {
        this.$refs.fileUpload.value = "";
        if (!res.error) {
          this.$Message.success("更新成功！");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.icon-manager {
  position: relative;
  .switch-btns {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    .ivu-btn {
      font-size: 15px;
      line-height: 40px;
      height: 40px;
    }
  }
}
</style>
